<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姚德秋">
    <title></title>
    <style>
        body {
            width: 350px;
            margin: 0 auto;
        }

        span {
            float: left;
            /* margin: 5px; */
            margin: 0 2.5px;
        }

        span img {
            width: 80px;
            height: 80px;
            /* float: left; */
        }

        .one {
            margin-left: 15px;
        }

        .two {
            margin-left: 15px;
        }

        .three {
            margin-left: 15px;
        }

        .big img {
            float: left;
            height: 250px;
            width: 240px;
            /* background-image: url(09.jpg); */
            /* background-repeat: no-repeat; */
            /* background-size: 240px 250px; */
        }
    </style>
</head>

<body>
    <div class="big">
        <img src="09.jpg" alt="">
    </div>
    <div class="xiao">
        <span class="one"><img src="09.jpg" alt=""></span>
        <span class="two"><img src="06.jpg" alt=""></span>
        <span class="three"><img src="07.jpg" alt=""></span></div>
    <span><img src="08.jpg" alt=""></span>
    <span><img src="05.jpg" alt=""></span>
    <span><img src="06.jpg" alt=""></span>
    <span><img src="07.jpg" alt=""></span>
    <span><img src="08.jpg" alt=""></span>
    <span><img src="05.jpg" alt=""></span>
    <span><img src="10.jpg" alt=""></span>
    <span><img src="11.jpg" alt=""></span>
    <span><img src="11.jpg" alt=""></span>
</body>

</html>
<script>
    var spans = document.querySelectorAll('span')
    var spimg = ["09.jpg", "06.jpg", "07.jpg", "08.jpg", "05.jpg", "06.jpg", "07.jpg", "08.jpg", "05.jpg", "10.jpg", "11.jpg"
        , "11.jpg"
    ]
    var div = document.querySelector('.big img')
    // var img = document.querySelector('.imgg' )
    for (var i = 0; i < spans.length; i++) {
        spans[i].index = i;
        // for(var j = 0;j<spimg.length;j++){
        // spimg[j].index = j;
        // console.log(spimg[j]);
        spans[i].onmouseover = function () {
            //    div.className = '';
            // img[j] = spimg[this];
            // div.style.backgroundImage = "url(spimg[this.index])";
            div.src = spimg[this.index]
            // console.log("url("+spimg[j]+")");
            // div = spimg[i];
            // spans
            // }
        }
    }
</script>